import React, { useState } from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, message } from "antd";
import { Link } from "react-router-dom";
import "./Login.css";

const Login: React.FC = () => {
  const [loading, setLoading] = useState(false);

  const onFinish = (values: any) => {
    console.log("Received values of form: ", values);
    setLoading(true);
    
    // 模拟登录请求
    setTimeout(() => {
      setLoading(false);
      message.success("登录成功！");
      // 这里可以添加登录成功后的跳转逻辑
    }, 1500);
  };

  return (
    <div className="login-container">
      {/* 左侧图像区域 */}
      <div className="login-left">
        <div className="login-left-content">
          <h1>欢迎使用后台管理系统</h1>
          <p>高效、安全、便捷的管理平台</p>
        </div>
      </div>
      
      {/* 右侧登录表单区域 */}
      <div className="login-right">
        <div className="login-form-container">
          <div className="login-logo">
            <h2>后台管理系统</h2>
          </div>
          
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={onFinish}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: "请输入用户名!" }]}
            >
              <Input 
                prefix={<UserOutlined className="site-form-item-icon" />} 
                placeholder="用户名" 
                autoComplete="username"
              />
            </Form.Item>
            
            <Form.Item
              name="password"
              rules={[{ required: true, message: "请输入密码!" }]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
                autoComplete="current-password"
              />
            </Form.Item>
            
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住我</Checkbox>
              </Form.Item>
            </Form.Item>
            
            <Form.Item>
              <Button 
                type="primary" 
                htmlType="submit" 
                className="login-form-button"
                loading={loading}
                block
              >
                登录
              </Button>
            </Form.Item>
            
            <Form.Item>
              <div className="login-register-link">
                还没有账户？ <Link to="/register">立即注册</Link>
              </div>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default Login;